﻿<form data-bind="with: organization">
    <label>Organization Name:</label>
    <input type="text" data-bind="value: OrganizationName, valueUpdate: 'keyup'" />
    <input type="submit" data-bind="click: save, enable: isValid()" />
</form>

<div data-bind="if: organization().isPersisted()">
    <button data-bind="click: addVolunteer">Add</button>
    <div data-bind="foreach: volunteers">
        <div>
            <form data-bind="style: { 'background-color': isPersisted() ? 'green' : 'red' }">
                <label>Formatted Name:</label>
                <input type="text" data-bind="value: FormattedName, valueUpdate: 'keyup'" />
                <label>Email Address:</label>
                <input type="email" data-bind="value: EmailAddress, valueUpdate: 'keyup'" />
            </form>
        </div>
    </div>
    <form>
        <input type="submit" data-bind="click: saveVolunteers" />
    </form>
</div>

@section ScriptContent {
    <script type="text/javascript" src="@Url.Content("~/Scripts/Site/Views/Home/Index.js")"></script>
}
